﻿<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CreateQuestion.aspx.vb" Inherits="Admin_CreateQuestion" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Create a Question</title>
		<link href="../Styles.css" type="text/css" rel="stylesheet"/>
        <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            function showRowIndexs() {
                var i = 0;
                $("#tableChoices tr td.tdLabel").each(function () {
                    i++;
                    $(this).html("Trả lời " + i);
                });
            }

            function addFormField() {
                var ctrlId = $("#<%= hidRowIndex.ClientID %>").val();
                $("#tableChoices").append("<tr class='row' id='pRow" + ctrlId + "'><td width='50px' class='tdLabel'>Trả lời:</td><td><input class='TextBox' type='text' name='txtChoice" + ctrlId + "' id='txtChoice" + ctrlId + "'> <a href='#' onClick='removeFormField(\"#pRow" + ctrlId + "\"); return false;'>Xóa</a></td></tr>");
                $("#<%= hidRowIndex.ClientID %>").val(++ctrlId);

                showRowIndexs();
            }

            function removeFormField(id) {
                var cId = $("input:hidden", id).val();
                var data = "{'cID':'" + cId + "'}"; //create the JSON data to send to server
                if (cId > 0) //call the Page method using JQuery ajax 
                {
                    $.ajax(
                {
                    type: "POST",
                    url: "Edit.aspx/DeletePollChoice",
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                });
                }

                $(id).remove();

                showRowIndexs();
            }
        </script>
	</head>
	<body>
		<form id="Form1" method="post" runat="server">

            <div class="DivRow">
                <div class="HeadTitle">
                    <h1><a href="Default.aspx">Question Administration</a> :: Create a Question</h1>
                </div>
                <div class="lblEdit">
                    <span class="fieldRequired">&nbsp;</span>Trường yêu cầu nhập dữ liệu           
                </div>
                <div class="Error">
                    <asp:ValidationSummary ID="ValidationSummary2" runat="server" />        
                </div>
            </div>			
	        <div class="DivRow">
                <div class="DivLabel">
                    Question:
                </div>
                <div class="DivTextBox" >
						<asp:TextBox id="questionText" runat="server" MaxLength="500" TextMode="MultiLine" Columns="40"
							Rows="5"></asp:TextBox>
                        <asp:RequiredFieldValidator 
                            ID="RequiredFieldValidator2" 
                            runat="server" 
                            ControlToValidate="questionText"
                            Display="None" 
                            ErrorMessage="Câu hỏi không được để trống."></asp:RequiredFieldValidator>
                </div>
	        </div>
	        <div class="DivRow">
                <div class="DivLabel">
                    User Control:
                </div>
                <div class="DivTextBox" >
					<asp:DropDownList id="controlSrc" runat="server" DataTextField="Name" 
                        DataValueField="Name" AutoPostBack="True"></asp:DropDownList>&nbsp;[
					<asp:LinkButton id="lnkPreview" runat="server">Preview</asp:LinkButton>] | [
					<asp:LinkButton id="btnRefreshUserControlList" runat="server">Refresh List</asp:LinkButton>]
                </div>
	        </div>

            <!-- ADD NEW OPTION -->
            <div runat="server" id="Div_AddNewOption" Visible="false">
                <div class="DivRow">
                    <div class="HeadTitle">
                        <h3>
                            TẠO MỚI OPTION
                        </h3>
                    </div>
                </div>
	            <div class="DivRow">
                    <div class="DivLabel">
                        <asp:Label ID="Label4" CssClass="TextLabel" runat="server" Text="Câu trả lời" /><span class="fieldRequired"></span>
                    </div>
                    <div class="DivTextBox" >
                        <div runat="server" id="divChoices">
                            <table id='tableChoices' width='400px'>
                                <tr id='pRow0'>
                                    <td width='50px' class='tdLabel'>
                                        Trả lời 1
                                    </td>
                                    <td>
                                        <%--<input type='text' class='TextBox' id='txtChoice0' name='txtChoice0' /> --%>
                                        <asp:TextBox ID="txtChoice0" class='TextBox' name='txtChoice0' CssClass="TextBox" runat="server" Text="" />
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                                            ControlToValidate="txtChoice0" Display="None" 
                                            ErrorMessage="Câu trả lời 1 không được để trống."></asp:RequiredFieldValidator>

                                        <%--<a onclick="removeFormField('#pRow0'); return false;" href="#">Xóa</a>--%>
                                    </td>
                                </tr>
                                <tr id='pRow1'>
                                    <td width='50px' class='tdLabel'>
                                        Trả lời 2
                                    </td>
                                    <td>
                                        <%--<input type='text' class='TextBox' id='txtChoice1' name='txtChoice1' /> --%>
                                        <asp:TextBox ID="txtChoice1" class='TextBox' name='txtChoice1' CssClass="TextBox" runat="server" Text="" />
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
                                            ControlToValidate="txtChoice1" Display="None" 
                                            ErrorMessage="Câu trả lời 2 không được để trống."></asp:RequiredFieldValidator>
                                        <%--<a onclick="removeFormField('#pRow1'); return false;" href="#">Xóa</a>--%>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <input type="button" onclick="addFormField();return false;" value="Thêm trả lời" class="btn" />
                    </div>
	            </div>
                <div class="DivRow">
                    <div class="DivLabel">
                        Câu trả lời mặc định
                    </div>
                    <div class="DivTextBox">
                        <asp:TextBox runat="server" ID="txtDefaultValue"></asp:TextBox>
                    </div>
                </div>
                <div class="DivRow">
                    <div class="DivLabel">
                        Câu trả lời đúng
                    </div>
                    <div class="DivTextBox">
                        <asp:TextBox runat="server" ID="txtAnswerValue"></asp:TextBox>
                        <asp:RequiredFieldValidator 
                            ID="RequiredFieldValidator4" 
                            runat="server" 
                            ControlToValidate="txtAnswerValue"
                            Display="None" 
                            ErrorMessage="Câu trả lời đúng không được để trống."></asp:RequiredFieldValidator>
                    </div>
                </div>
                <div style="display: none">
                    <asp:HiddenField ID="hidID" Value="0" runat="server" />
                    <asp:HiddenField ID="hidOptionID" Value="0" runat="server" />
                    <asp:HiddenField runat="server" ID="hidRowIndex" Value="2" /> <!-- by default there will be two inputs available to insert choices -->
                </div>
            </div>
            <div class="DivRow">
                <div class="DivLabel">
                <br /><br />
					<asp:Button id="btnAddQuestion" runat="server" Text="Create Question"></asp:Button>&nbsp;&nbsp;
					<asp:Button id="btnCancel" runat="server" Text="Cancel"></asp:Button>
                </div>
            </div>            

        </form>
	</body>
</html>